<template>
    <div>
        <el-col>
        <el-table v-loading="loading" :data="colorList">
            <el-table-column label="序号" align="center" width="80">
                <template slot-scope="scope">
                    <span>{{
                    (queryParams.pageNum - 1) * queryParams.pageSize +
                    scope.$index +
                    1
                    }}</span>
                </template>
            </el-table-column>
            <el-table-column
            label="颜色"
            align="center"
            prop="color"
            />
            
            <el-table-column
            label="是否启用"
            align="center"
            prop="enabled"
            >
                <template slot-scope="scope">
                    <el-switch
                        v-model="scope.row.enabled"
                        active-value="1"
                        inactive-value="2"
                        @change="(value) => colorChange(value, scope.row.id)"
                        active-color="#1890ff"
                        inactive-color="#909399">
                    </el-switch>
                </template>
            </el-table-column>
        </el-table>

        <!-- <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getColorList"
        /> -->
    </el-col>
    </div>
</template>
<script>

import {
  listPrintersColor,
  updateColor,
} from "@/api/base/digitalPrinters";

export default {
    props:{
        printerId: String,
        parentId: String,
    },
    data() {
        return {
            //加载状态
            loading: true,
            total:0,
            //颜色列表数据
            colorList: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
            },  
        }
    },

    created() {
        this.getColorList();
    },
    methods: {
        //查询颜色列表
        async getColorList(){
            this.loading = true
            try{
                this.queryParams = {
                    ...this.queryParams,
                    printerId: this.printerId,
                    parentId: this.parentId
                }
                const res = await listPrintersColor(this.queryParams)
                console.log(res)
                if(res && res.code ===200){
                    this.colorList = res.rows
                    this.total = res.total
                }
            }catch(error){
                console.log('查询颜色列表出错',error)
            }finally{
                this.loading = false
            }  
        },
        //颜色开关变化
        colorChange(value, id){
            this.updataEnabled({
                id: id,
                enabled: value
            });
        },
        //修改颜色开关
        async updataEnabled(data){
            try{
                const res = await updateColor(data);
                console.log('颜色开关修改结果',res)
            }catch(error){
                console.log('修改颜色开关出错',error)
            }finally{
                this.getColorList();
            }
        }
    }
}
</script>
<style lang="less" scoped>

</style>